{%- set page_id = page_id|default('home') -%}
{%- set page_title = page_title|default('Administration pages') -%}

{% macro menu_tab(tab) %}
  {% if tab.children %}
    <li class="admin-navbar__tab-item dropdown{% if tab.id in page_id %} is-active{% endif %}">
      <a href="#" class="admin-navbar__tab-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
      {{ tab.title }}
      <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        {% for child in tab.children %}
          <li><a href="{{ child.url }}">{{ child.title }}</a></li>
        {% endfor %}
      </ul>
    </li>
  {% else %}
    <li class="admin-navbar__tab-item{% if tab.id == page_id %} is-active{% endif %}">
      <a class="admin-navbar__tab-link" href="{{ tab.url }}">{{ tab.title }}</a>
    </li>
  {% endif %}
{% endmacro %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <title>
      Hypothesis: {{ page_title }}
    </title>

    {% for url in asset_urls("admin_css") %}
      <link rel="stylesheet" href="{{ url }}">
    {% endfor %}

    {% for url in asset_urls("header_js") %}
      <script type="module" src="{{ url }}"></script>
    {% endfor %}

    {% include 'h:templates/includes/settings.html.jinja2' %}
  </head>

  <body>
    <nav class="admin-navbar">
      <div class="admin-navbar__container">
        <a class="admin-navbar__logo-link" href="{{ request.route_url('admin.index') }}">
          {{ svg_icon('logo', 'admin-navbar__logo') }}
        </a>
        <ul class="admin-navbar__tab-list">
          {% for tab in navbar_data_admin(request) %}
            {{ menu_tab(tab) }}
          {% endfor %}
        </ul>
      </div>
    </nav>

    <div class="container">
      <div class="row">
        <div class="col-md-12 main">
          {% include "h:templates/includes/flashbar.html.jinja2" %}
          <h1 class="page-header">{{ page_title }}</h1>
          {% block content %}{% endblock %}
        </div>
      </div>
    </div>

    {% for url in asset_urls("admin_js") %}
      <script type="module" src="{{ url }}"></script>
    {% endfor %}
    {% block scripts %}{% endblock %}
  </body>
</html>
